<template>
  <div class="select-match-container container-content">
    <el-container class="select-question-content">
      <div :style="{ width: '100%' }">
        <div class="code-submit-btn-box">
          <!-- <el-button class="code-submit-btn" v-if="isMatch && match.format === 'IOI'" type="primary" :loading="loading"
            @click="mySubmit(false)">
            <el-icon>
              <UploadFilled />
            </el-icon>
            &nbsp; 提交题目
          </el-button>
          <el-button v-else type="primary" :loading="loading" @click="mySubmit">
            <el-icon>
              <UploadFilled />
            </el-icon>
            &nbsp; 提交试卷
          </el-button> -->
        </div>
        <div class="">
          <div class="question-number-container">
            第 <span class="question-number">{{ index + 1 }}</span>
            题 ({{ question.type === "多选" ? "不定项选择" : question.type }})
          </div>
          <el-scrollbar>
            <div class="question-content">
              <div class="context question-html editor-content-view" v-html="question.context"></div>
              <div v-if="question.type === '判断'" class="row">
                <div class="col-6">
                  <div class="select-judgment  cursor-pointer dui">
                    <div class="text-center div" :class="data == true ? 'bg-judgment' : ''" @click="panduan(true)">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dui" />
                      </svg>
                      正确
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="select-judgment cursor-pointer cuo">
                    <el-row>
                      <el-col class="text-center div" @click="panduan(false)"
                        :class="data == false ? 'bg-judgment' : ''">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-cuowu" />
                        </svg>
                        错误
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
              <div v-else-if="question.type === '单选'" class="row">
                <div class="col-6 choose-item" v-for="(v, k) in option" :key="k">
                  <div class="select-choice cursor-pointer" :class="data == choice[k] ? 'bg-choice' : ''">
                    <el-container @click="xuanze(choice[k])">
                      <el-aside width="100px" class="select-choice-label">
                        <div v-text="choice[k]"></div>
                      </el-aside>
                      <el-main class="select-main p-0">
                        <el-row>
                          <el-col class="position-relative" style="min-height: 60px" :span="24">
                            <!-- :preview-src-list="[v]" -->
                            <el-image :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" class="el-img" v-if="image(v)"
                              :src="v" />
                            <span v-else class="text-truncate d-inline-block question-html">{{ v }}</span>
                          </el-col>
                        </el-row>
                      </el-main>
                    </el-container>
                  </div>
                </div>
              </div>
              <div v-else-if="question.type === '多选'" class="row">
                <div class="col-6 choose-item" v-for="(v, k) in choice" :key="k">
                  <div class="select-choice cursor-pointer"
                    :class="Array.isArray(data) && data.includes(v) ? 'bg-choice' : ''">
                    <el-container @click="xuanze(choice[k], true)">
                      <el-aside width="100px" class="select-choice-label">
                        <div v-text="choice[k]"></div>
                      </el-aside>
                      <el-main class="p-0 select-main">
                        <el-row>
                          <el-col class="position-relative" style="min-height: 60px" :span="24">
                            <!-- :preview-src-list="[option[k]]" -->
                            <el-image :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" class="el-img"
                              v-if="image(option[k])" :src="option[k]" />
                            <span class="text-truncate d-inline-block question-html" v-else>{{ option[k]
                            }}</span>
                          </el-col>
                        </el-row>
                      </el-main>
                    </el-container>
                  </div>
                </div>
              </div>
              <div v-else-if="question.type === '填空'" class="form-group row justify-content-md-center">
                <label for="staticEmail" class="col-12 col-form-label text-center mb-3">空白处填入：</label>
                <div class="col-12 text-center">
                  <input class="pl-3 form-control" id="staticEmail" v-model.lazy="data" placeholder="请在此处填写内容" />
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-container>
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  PropType,
  ref,
  toRefs,
  watch,
} from "vue";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import questionhtml from "../../../util/htmlstring";
import { isImage } from "../../../util/RegExp";

export default defineComponent({
  props: {
    index: {
      type: Number as PropType<number>,
      default: 1,
    },
    question: {
      type: Object as PropType<Studycodemodel.Imatchquestion>,
      required: true,
    },
    setuserdata: {
      type: Function,
      required: true,
    },
    userdata: {
      type: Object,
    },
    match: { type: Object as PropType<Studycodemodel.Iactivity> },
    submit: { type: Function },
    isMatch: { type: Boolean } // 区分测评模式和比赛模式
  },
  setup(p) {
    const choice = ['A', 'B', 'C', 'D']

    const { question, userdata, match, submit, isMatch } = toRefs(p);

    const option = computed(() => {
      if (question.value.answer) {
        return question.value.answer.options || [];
      }
      return [];
    });

    const data = ref<boolean | string | string[]>();
    onMounted(() => {
      start();
    });
    function start() {
      nextTick(() => {
        if (userdata?.value && question.value.ID) {
          const t = userdata.value[question.value.ID];
          data.value = t;
        }
        questionhtml()
      });
    }
    watch(
      () => data.value,
      () => {
        p.setuserdata(question.value.ID, data.value);
      }
    );

    watch(
      () => question.value,
      () => {
        start();
      }
    );

    function image(str: string) {
      return isImage.test(str);
    }

    function panduan(t: boolean) {
      data.value = t;
    }

    function xuanze(t: string, type?: boolean) {
      if (type) {
        // 多选
        if (!Array.isArray(data.value)) {
          data.value = [];
        }
        const f = data.value.findIndex((v) => v === t);

        if (f !== -1) {
          data.value.splice(f, 1);
        } else {
          if (data.value.length >= 4) {
            data.value.splice(0, 1);
          }
          data.value.push(t);
        }
      } else {
        data.value = t;
      }
    }
    const loading = ref(false);
    // 提交试卷
    function mySubmit(b: boolean) {
      loading.value = true;
      setTimeout(() => {
        submit.value(b)
        loading.value = false;
      }, 300);
    }

    return {
      panduan,
      data,
      xuanze,
      image,
      option,

      loading,
      match,
      submit,
      mySubmit,

      choice,
    };
  },
});
</script>

<style scoped>
.select-match-container {
  padding: var(--container-margin) 5% 0;
  margin: 0 3%;
  background-color: #fff;

  --container-margin: 20px;
  --border-radius: 28px;
}

.select-question-content {
  /* padding: var(--container-margin) 0; */
  padding-bottom: var(--container-margin);
  overflow: hidden;
}

.code-submit-btn-box {
  margin-left: 40px;
}

.code-submit-btn {
  width: 124px;
  height: 42px;
  border-radius: 8px;
  background-color: rgba(70, 131, 250, 1);
}

.question-number-container {
  text-align: center;
  margin: calc(var(--container-margin)/2) auto;
  width: 220px;
  height: 42px;
  border: 1px solid var(--color-cheng);
  border-radius: var(--border-radius);
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #909399;
  opacity: 1;
}

.question-number {
  color: var(--sass-color-blue);
}

.question-content {
  width: 100%;
  padding: 10px 30px;
  /* - 40px */
  height: calc(100vh - 100px - var(--container-margin) - var(--container-margin) * 4 - 42px);
}

.context {
  margin-bottom: calc(var(--container-margin) * 2);
  background: #ffffff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 24px;
  padding: var(--container-margin);
}

/*  */
.question-html {
  white-space: pre-wrap;
  /* 数字字母自动换行 */
  word-break: break-all;
  word-wrap: break-word;
}

/* judgment（判断题）optionCorrect（正确）optionIncorrect（错误） */
.select-judgment {
  width: 360px;
  height: 60px;
  line-height: 60px;
  border-radius: var(--border-radius);
  margin: 0 auto;
  opacity: 1;
  transition: all 0.3s;
  overflow: hidden;

  --optionCorrect-color: #3ac2a2;
  --optionIncorrect-color: #f56c6c;
}

.select-judgment .div {
  font-size: 16px;
}

.select-judgment .icon {
  font-size: 36px;
  transform: translateY(7px) translateX(-10px);
}

.dui {
  border: 1px solid var(--optionCorrect-color);
}

.dui .icon {
  color: var(--optionCorrect-color);
}

.dui:hover {
  background-color: #d8f3ee;
}

.cuo {
  border: 1px solid var(--optionIncorrect-color);
}

.cuo .icon {
  color: var(--optionIncorrect-color);
}

.cuo:hover {
  background-color: #fde2e2;
}


.bg-judgment {
  background-color: var(--optionCorrect-color);
  color: #fff !important;
}

.bg-judgment .icon {
  color: #fff !important;
}

.cuo .bg-judgment {
  background-color: var(--optionIncorrect-color);
}

/* singleChoice（单选题） */
/* multipleChoice（多选题） */
.choose-item {
  display: flex;
}

.select-choice {
  min-width: 360px;
  min-height: 60px;
  overflow: hidden;
  margin: auto 0;
  border-radius: var(--border-radius);
  margin-bottom: 50px;
  border: 1px solid var(--color-cheng);
  transition: all 0.3s;
}

.select-choice-label {
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  font-weight: bold;
  opacity: 1;
  color: var(--color-cheng);
}

/* 选择后 */
.bg-choice {
  background-color: var(--color-cheng) !important;
  color: #fff !important;
  font-weight: bold;
}

.bg-choice .select-choice-label {
  color: #fff;
}

/* hover */
.select-choice:hover {
  color: #fff;
  font-weight: bold;
  background: var(--sass-color-blue3);
  border-color: var(--sass-color-blue3);
}

/* 选项内容 */
.select-main {
  font-size: 16px;
  overflow: hidden;
}

.select-main i {
  position: absolute;
  font-size: 60px;
  right: 20px;
  bottom: 20px;
}

.position-relative {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0.5rem 1rem;
}

.el-img {
  max-width: 100%;
  object-fit: cover;
}

/* fillInTheBlank（填空题） */

.form-control {
  width: 400px;
  margin: 0 auto;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #dcdfe6;
  outline: 0;
  box-shadow: none !important;
}
</style>